<template>
  <Card title="工作经历" @add="handleAdd()">
    <WI v-for="item in seekerStore.work_experiences" :data="item" @edit="handleEdit"></WI>
  </Card>

  <MeModal ref="editWERef" width="600px" @ok="handleEditSave()">
    <n-form ref="WEFormRef" :model="form" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi label="公司名称" path="company_name" :span="12">
          <n-input v-model:value="form.company_name" maxlength="20" />
        </n-form-item-gi>
        <n-form-item-gi label="职位名称" path="job_name" :span="12">
          <n-input v-model:value="form.job_name" maxlength="20" />
        </n-form-item-gi>
        <!-- 修改为选项 -->
        <n-form-item-gi
          label="公司行业"
          path="industry_code"
          :span="12"
          @click="handleOpenIndustrySelect"
          class="cursor-pointer"
        >
          <n-input v-model:value="industry_name" />
        </n-form-item-gi>
        <n-form-item-gi label="时间" path="time" :span="12">
          <n-date-picker
            v-model:formatted-value="form.time"
            type="monthrange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </n-form-item-gi>
        <n-form-item-gi label="职责业绩" path="performance" :span="24">
          <n-input
            v-model:value="form.performance"
            type="textarea"
            :placeholder="pfm_placeholder"
            maxlength="1000"
          />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </MeModal>

  <IndustrySelect ref="industrySelectRef" @click-industry="handleClickIndustry"></IndustrySelect>
</template>

<script setup>
import seekerApi from '@/api/seeker'
import { MeModal, IndustrySelect } from '@/components'
import { useSeekerStore } from '@/store'
import { useForm, useModal } from '@/composables'
import { getIndustriesName } from '@/data'
import Card from '../card.vue'
import WI from './workExperienceItem.vue'
const seekerStore = useSeekerStore()
seekerStore.getWorkExperience()

const rules = {
  company_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  job_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  industry_code: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  performance: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  time: {
    type: 'array',
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
}

const pfm_placeholder = `描述你的项目业绩，让招聘方快速记住你
例如：
1.职位描述
2.我的贡献
3.我的收获
4.遇到的难点和解决方案`

let industry_name = computed(() => {
  return getIndustriesName(form.value.industry_code)
})

const [editWERef] = useModal()
const [WEFormRef, form, WEValidation] = useForm({})

function handleEdit(id) {
  const value = form.value
  const we = seekerStore.work_experiences.find((o) => o.id === id)
  value.id = id
  value.time = [we.start_time, we.end_time]
  value.company_name = we.company_name
  value.job_name = we.job_name
  value.industry_code = we.industry_code
  value.performance = we.performance
  editWERef.value.open({ title: '编辑工作经历信息' })
}

function handleAdd() {
  const value = form.value
  value.id = null
  value.time = null
  value.company_name = null
  value.job_name = null
  value.industry_code = null
  value.performance = null
  editWERef.value.open({ title: '添加工作经历信息', okText: '添加' })
}

async function handleEditSave() {
  await WEValidation()
  form.value.seeker_id = seekerStore.seeker.seeker_id
  form.value.start_time = form.value.time[0]
  form.value.end_time = form.value.time[1]
  await seekerApi.saveWorkExperience(form.value)
  $message.success('保存成功')
  seekerStore.getWorkExperience()
}

//打开行业选择框
const industrySelectRef = ref()
function handleOpenIndustrySelect() {
  industrySelectRef.value.open()
}
//设置点击目标的行业信息
function handleClickIndustry(industry_obj) {
  form.value.industry_code = industry_obj.industry_code
}
</script>
